<template>
	<view>
		<view class="content">
			<view class="title">
				支付方式
			</view>
			<view class="wx" @click="selectPayment('wechat')">
				<image class="img1" src="https://pw.qyang.cc/static/wx.png" mode=""></image>
				微信
				<image class="btn-img1" v-if="selectedItem=='wechat'" src="https://pw.qyang.cc/static/commit-success.png" mode="">
				</image>
				<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode=""></image>
			</view>
			<!-- #ifndef MP-WEIXIN -->
				<view class="zfb" @click="selectPayment('alipay')">
					<image class="img1" src="https://pw.qyang.cc/static/zfb.png" mode=""></image>
					支付宝
					<image class="btn-img1" v-if="selectedItem=='alipay'" src="https://pw.qyang.cc/static/commit-success.png" mode="">
					</image>
					<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode=""></image>
				</view>
			<!-- #endif -->
			<view class="offline" @click="selectPayment('offline')" v-if="type == 'order'">
				<view class="">
					<image class="img1" src="https://pw.qyang.cc/static/my/logo/bank.png" mode=""></image>
					客服支付
					<image class="btn-img1" v-if="selectedItem=='offline'" src="https://pw.qyang.cc/static/commit-success.png" mode="">
					</image>
					<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png" mode=""></image>
				</view>
				<text class="tips">{{tips}}</text>
			</view>
		</view>
		<view class="bottom">
			<view class="text">合计：￥{{money}}</view>
			<view class="btn" @click="toPay()">确认</view>
		</view>
	</view>
</template>

<script>
	import Pay from '@/utils/pay.js';
	export default {
		data() {
			return {
				money: '',
				selectedItem: 'wechat',
				id:0,
				type:'',
				tips:'',
				params:{},
			};
		},
		onLoad(opt) {
			this.type = opt.type
			if(opt.type=='addressChange'){
				this.params = JSON.parse(decodeURIComponent(opt.params))
				this.money = this.params.diff
			}else{
				this.money = opt.money
				this.id = opt.id
				
				this.rq.getData('index/hint').then(res=>{
					this.tips = res.data
				})
			}
		},
		methods: {
			selectPayment(paymentType) {
				if (paymentType === 'wechat') {
					this.selectedItem = 'wechat';
				} else if (paymentType === 'alipay') {
					this.selectedItem = 'alipay';
				}else if (paymentType === 'offline') {
					this.selectedItem = 'offline';
				}
			},
			toPay() {
				if(this.type == 'addressChange'){
					new Pay(this.selectedItem, this.type, this.params);
				}else{
					new Pay(this.selectedItem, this.type, this.id);
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 680rpx;
		// height: 300rpx;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		padding: 20rpx;
		margin: 30rpx auto;

		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;

		color: #333333;

		.title {
			margin: 20rpx;
		}

		.wx {
			display: flex;
			margin: 20rpx;
			padding: 30rpx 0;

			.img1 {
				width: 14px;
				height: 14px;
				margin-right: 10rpx;
			}

			.btn-img1 {
				width: 16px;
				height: 16px;
				position: absolute;
				right: 24px;
			}
		}

		.zfb {
			display: flex;
			margin: 20rpx;
			padding: 30rpx 0;

			.img1 {
				width: 14px;
				height: 14px;
				margin-right: 10rpx;
			}

			.btn-img1 {
				width: 16px;
				height: 16px;
				position: absolute;
				right: 24px;
			}
		}
		
		.offline{
			display: flex;
			flex-direction: column;
			margin: 20rpx;
			padding: 30rpx 0;
		
			.img1 {
				width: 14px;
				height: 14px;
				margin-right: 10rpx;
			}
		
			.btn-img1 {
				width: 16px;
				height: 16px;
				position: absolute;
				right: 24px;
			}
			
			.tips{
				margin-left: 40rpx;
				margin-top: 28rpx;
				font-size: 26rpx;
				color: #D8D8D8;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 1;

		display: flex;
		align-items: center;

		.text {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 45px;
			letter-spacing: 0px;
			color: #333333;
			margin: 0 40rpx;
			width: 40%;
			height: 88rpx;
			text-align: start;
		}

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 20rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
			width: 40%;
		}
	}
</style>